<template>
  <div class="admin-config">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统配置</span>
          <el-button type="primary" @click="handleSave">保存配置</el-button>
        </div>
      </template>

      <el-form
        ref="configFormRef"
        :model="configForm"
        :rules="configRules"
        label-width="120px"
      >
        <!-- 基本配置 -->
        <div class="config-section">
          <div class="section-title">基本配置</div>
          <el-form-item label="系统名称" prop="systemName">
            <el-input v-model="configForm.systemName" />
          </el-form-item>
          <el-form-item label="系统Logo" prop="systemLogo">
            <el-upload
              class="logo-uploader"
              action="/api/upload"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :before-upload="beforeLogoUpload"
            >
              <img v-if="configForm.systemLogo" :src="configForm.systemLogo" class="logo" />
              <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="configForm.contactPhone" />
          </el-form-item>
          <el-form-item label="联系邮箱" prop="contactEmail">
            <el-input v-model="configForm.contactEmail" />
          </el-form-item>
          <el-form-item label="系统公告" prop="announcement">
            <el-input
              v-model="configForm.announcement"
              type="textarea"
              :rows="3"
              placeholder="请输入系统公告"
            />
          </el-form-item>
        </div>

        <!-- 注册配置 -->
        <div class="config-section">
          <div class="section-title">注册配置</div>
          <el-form-item label="开放注册">
            <el-switch v-model="configForm.enableRegister" />
          </el-form-item>
          <el-form-item label="邮箱验证">
            <el-switch v-model="configForm.requireEmailVerification" />
          </el-form-item>
          <el-form-item label="默认角色" prop="defaultRole">
            <el-select v-model="configForm.defaultRole">
              <el-option label="普通用户" value="user" />
              <el-option label="志愿者" value="volunteer" />
            </el-select>
          </el-form-item>
        </div>

        <!-- 项目配置 -->
        <div class="config-section">
          <div class="section-title">项目配置</div>
          <el-form-item label="项目审核">
            <el-switch v-model="configForm.requireProjectApproval" />
          </el-form-item>
          <el-form-item label="最大参与人数" prop="maxProjectParticipants">
            <el-input-number
              v-model="configForm.maxProjectParticipants"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item label="项目分类" prop="projectCategories">
            <el-select
              v-model="configForm.projectCategories"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请输入或选择项目分类"
            >
              <el-option
                v-for="item in projectCategoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 时长配置 -->
        <div class="config-section">
          <div class="section-title">时长配置</div>
          <el-form-item label="时长审核">
            <el-switch v-model="configForm.requireHourApproval" />
          </el-form-item>
          <el-form-item label="单次最大时长" prop="maxServiceHours">
            <el-input-number
              v-model="configForm.maxServiceHours"
              :min="1"
              :max="24"
            />
          </el-form-item>
          <el-form-item label="时长等级" prop="hourLevels">
            <el-table :data="configForm.hourLevels" border>
              <el-table-column prop="name" label="等级名称">
                <template #default="{ row }">
                  <el-input v-model="row.name" placeholder="请输入等级名称" />
                </template>
              </el-table-column>
              <el-table-column prop="hours" label="所需时长">
                <template #default="{ row }">
                  <el-input-number v-model="row.hours" :min="0" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="{ $index }">
                  <el-button link type="danger" @click="removeHourLevel($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-footer">
              <el-button type="primary" link @click="addHourLevel">添加等级</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 配置表单
const configForm = reactive({
  // 基本配置
  systemName: '海洋生态志愿服务平台',
  systemLogo: '',
  contactPhone: '',
  contactEmail: '',
  announcement: '',

  // 注册配置
  enableRegister: true,
  requireEmailVerification: true,
  defaultRole: 'volunteer',

  // 项目配置
  requireProjectApproval: true,
  maxProjectParticipants: 100,
  projectCategories: ['海洋保护', '环境教育', '科研调查', '海滩清洁'],

  // 时长配置
  requireHourApproval: true,
  maxServiceHours: 8,
  hourLevels: [
    { name: '初级志愿者', hours: 0 },
    { name: '中级志愿者', hours: 50 },
    { name: '高级志愿者', hours: 100 },
    { name: '资深志愿者', hours: 200 }
  ]
})

// 项目分类选项
const projectCategoryOptions = [
  { value: '海洋保护', label: '海洋保护' },
  { value: '环境教育', label: '环境教育' },
  { value: '科研调查', label: '科研调查' },
  { value: '海滩清洁', label: '海滩清洁' },
  { value: '珊瑚保育', label: '珊瑚保育' },
  { value: '海龟救助', label: '海龟救助' }
]

// 表单校验规则
const configRules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' }
  ],
  systemLogo: [
    { required: true, message: '请上传系统Logo', trigger: 'change' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' }
  ],
  contactEmail: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  defaultRole: [
    { required: true, message: '请选择默认角色', trigger: 'change' }
  ],
  maxProjectParticipants: [
    { required: true, message: '请输入最大参与人数', trigger: 'change' }
  ],
  projectCategories: [
    { required: true, message: '请至少添加一个项目分类', trigger: 'change' }
  ],
  maxServiceHours: [
    { required: true, message: '请输入单次最大时长', trigger: 'change' }
  ]
}

// Logo上传相关方法
const handleLogoSuccess = (response) => {
  configForm.systemLogo = response.url
  ElMessage.success('上传成功')
}

const beforeLogoUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！')
    return false
  }
  return true
}

// 时长等级相关方法
const addHourLevel = () => {
  configForm.hourLevels.push({
    name: '',
    hours: 0
  })
}

const removeHourLevel = (index) => {
  configForm.hourLevels.splice(index, 1)
}

// 保存配置
const handleSave = () => {
  ElMessage.success('保存成功')
}
</script>

<style scoped lang="scss">
.admin-config {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .config-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 24px;
      padding-left: 8px;
      border-left: 4px solid var(--el-color-primary);
    }
  }

  .logo-uploader {
    :deep(.el-upload) {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);

      &:hover {
        border-color: var(--el-color-primary);
      }
    }

    .logo-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }

    .logo {
      width: 178px;
      height: 100px;
      display: block;
      object-fit: contain;
    }
  }

  .table-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }
}
</style> 